<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <title>css布局--列表（11.16）</title>
    <style>
        li{
            display: inline;
        }
        body{
            background-color:red;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 表格 -->
        <!-- <table class="table"> -->
            <!-- 斑玛表格 -->
            <!-- table-hover鼠标悬停 -->
        <!-- <table class="table table-striped table-hover"> -->
            <!-- 框线 -->
        <!-- <table class="table table-bordered table-hover table-striped "> -->
            <!-- 小号的表格 -->
        <table class="table table-sm table-bordered table-hover table-striped">
            xxx表格
            <!-- <tr class="table-light"> -->
            <tr class="table-dark">
                <th>序号</th>
                <th>分数</th>
            </tr>
            <tr class="table-danger">
                <td>001</td>
                <td>100</td>
            </tr>
            <tr class="table-success">
                <td>002</td>
                <td>99</td>
            </tr class="table-primary">
                <td>003</td>
                <td>95</td>
            </tr>
            </tr class="bg-success">
                <td>003</td>
                <td>95</td>
            </tr>
            </tr class="table-primary">
                <td>004</td>
                <td>95</td>
            </tr>
            </tr class="table-primary">
                <td>005</td>
                <td>95</td>
            </tr>
        </table>
    </div>

    <p></p>

    <!-- 响应式表格 -->
    <div class="container">
        <!-- 表格 -->
        <!-- <table class="table"> -->
            <!-- 斑玛表格 -->
            <!-- table-hover鼠标悬停 -->
        <!-- <table class="table table-striped table-hover"> -->
            <!-- 框线 -->
        <!-- <table class="table table-bordered table-hover table-striped "> -->
            <!-- 小号的表格 -->
        <!-- <table class="table table-sm table-bordered table-hover table-striped " > -->
            <!-- table-responsive-sm  响应式-->
        <table class="table table-sm table-bordered table-hover table-striped table-responsive-sm" >
            xxx表格
            <!-- <tr class="table-light"> -->
            <tr class="table-dark">
                <th>序号</th>
                <th>分数</th>
                <th>序号</th>
                <th>分数</th>
                <th>序号</th>
                <th>分数</th>
            </tr>
            <tr class="table-danger">
                <td>001</td>
                <td>100</td>
                <td>001</td>
                <td>100</td>
                <td>001</td>
                <td>100</td>
            </tr>
            <tr class="table-success">
                <td>002</td>
                <td>99</td>
                <td>002</td>
                <td>99</td>
                <td>002</td>
                <td>99</td>
            </tr class="table-primary">
                <td>003</td>
                <td>95</td>
                <td>003</td>
                <td>95</td>
                <td>003</td>
                <td>95</td>
            </tr>
            </tr class="bg-success">
                <td>003</td>
                <td>95</td>
                <td>003</td>
                <td>95</td>
                <td>003</td>
                <td>95</td>
            </tr>
            </tr class="table-primary">
                <td>004</td>
                <td>95</td>
                <td>004</td>
                <td>95</td>
                <td>004</td>
                <td>95</td>
            </tr>
            </tr class="table-primary">
                <td>005</td>
                <td>95</td>
                <td>005</td>
                <td>95</td>
                <td>005</td>
                <td>95</td>
            </tr>
            <tr class="table-dark">
                <th>序号</th>
                <th>分数</th>
            </tr>
            <tr class="table-danger">
                <td>001</td>
                <td>100</td>
            </tr>
            <tr class="table-success">
                <td>002</td>
                <td>99</td>
            </tr class="table-primary">
                <td>003</td>
                <td>95</td>
            </tr>
            </tr class="bg-success">
                <td>003</td>
                <td>95</td>
            </tr>
            </tr class="table-primary">
                <td>004</td>
                <td>95</td>
            </tr>
            </tr class="table-primary">
                <td>005</td>
                <td>95</td>
            </tr>
        </table>
    </div>




    <div class="container">
        <!-- 列表 -->
        <!-- class="list-unstyled"> 不添加样式 -->
        <!-- <ul class="list-unstyled"> -->
            <!-- "list-initial"> 变成一排 -->
        <ul class="list-initial">
            <li>苹果</li>
            <li>香蕉</li>
            <li>梨子</li>
            <li>荔枝</li>
            <li></li>
        </ul>
    </div>

    <hr>
    <!-- &lt;(小于)h1&gt;（大于） -->
    <code>&lt;h1&gt;&lt;/h1&gt;</code>
    <br><br>
    <pre class="pre-scrollable">
    void swap(int x, int y){
        int t;
        t=x;
        x=y;
        y=t;
    }
    </pre>
    <br>

    <hr>

    
</body>
</html>